<template>
    <section class="EstateDetails-box">
        <!--新房详情-->
        <DetailsHeader></DetailsHeader>

        <div class="content">
            <div class="container">
                <img src="/static/img/buy-house-process.jpg" class="buy-house-process" v-if="EstateHouseDetails.countryName == '美国'">
                <a-row :gutter="48">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <!--楼层导航-->
                        <a-anchor :offsetTop="150" class="anchor-box">
                            <a-anchor-link :class="{'ant-anchor-link-active': cityAnchorLink}" href="#Project-details" title="项目详情" />
                            <a-anchor-link href="#Door-model-introduced" title="户型介绍" />
                            <a-anchor-link href="#City-overview" title="城市概况" />
                            <a-anchor-link href="#HouseQA" title="常见问题" />
                            <a-anchor-link href="#HouseLoanCalculator" title="房贷计算器" v-if="EstateHouseDetails.countryName == '美国'"  />
                            <a-anchor-link href="JavaScript:;"><span slot="title" @click="callMEIQIA" >预约看房</span></a-anchor-link>
                        </a-anchor>

                        <div class="inside clearfix">
                            <!--项目详情 -->
                            <ProjectDetails></ProjectDetails>

                            <!--户型介绍-->
                            <section class="public-header-content" id="Door-model-introduced">
                                <header>户型介绍</header>
                                <div class="content clearfix" v-html="EstateHouseDetails.description"></div>
                            </section>

                            <!--城市概况-->
                            <CityOverview :EstateHouseId="EstateHouseId" ></CityOverview>

                            <!--常见问题-->
                            <Question></Question>
                        </div>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <RightList></RightList>
                    </a-col>
                </a-row>

                <template v-if="EstateHouseDetails.countryName == '美国'">
                    <!--公共组件——贷款计算器-->
                    <HouseLoanCalculator id="HouseLoanCalculator"></HouseLoanCalculator>

                    <!--公共组件——客户购房能力-->
                    <!--<ClientPurchaseHouseAbility id="ClientPurchaseHouseAbility"></ClientPurchaseHouseAbility>-->

                    <!--公共组件——租售比计算器-->
                    <RentRatioCalculator id="RentRatioCalculator"></RentRatioCalculator>
                </template>

            </div>
        </div>
        <!--房源推荐-->
        <recommendHouse></recommendHouse>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="true"></BackTop>
    </section>
</template>

<script>
    import recommendHouse from '../../../../components/recommendHouse.vue';//公共组件——房源推荐
    import consultantTeam from '../../../../components/consultantTeam.vue';//公共组件——中美置业团队

    import DetailsHeader from './header.vue';//头部：标题、收藏、加入对比、帮我找房功能，左侧房源轮播图和视频，右侧房源基本信息
    import ProjectDetails from './ProjectDetails.vue';  //项目详情
    import CityOverview from './CityOverview.vue';//城市概况
    import Question from './Question.vue'; //百科常见问题——房产问题3条
    import RightList from './RightList.vue'; //右侧列表：购房意向、同价位房源、热门房源

    import HouseLoanCalculator from '../../../../components/loanCalculator/HouseLoanCalculator.vue';   //公共组件——贷款计算器
    import ClientPurchaseHouseAbility from '../../../../components/loanCalculator/ClientPurchaseHouseAbility.vue';   //公共组件——客户购房能力
    import RentRatioCalculator from '../../../../components/loanCalculator/RentRatioCalculator.vue';   //公共组件——租售比计算器

    import BackTop from '../../../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                EstateHouseId: this.$route.query.EstateHouseId, // 详情Id
                EstateHouseDetails: {},
                cityAnchorLink: true,//默认给楼层导航第一个链接active类名

                downPayment: 20,//贷款计算器——首付百分比
                propertyTaxRate: '',//贷款计算器——房产税年利率
                PropertyManagementFee: '',//贷款计算器——物业费

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        beforeRouteUpdate(to, from, next){
            next();
            // console.log(to, from, next)

            //判断是否是从新房详情页跳转进来，并且过滤判断hash值，即#后边的值（防止点击楼层导航触发beforeRouteUpdate，而造成发送下面两个接口）
            if(to.path == '/EstateDetails' && to.hash == ''){
                this.EstateHouseId = to.query.EstateHouseId;
                //更新新房详情数据
                this.getEstateHouseDetails();
                //更新房源图片数据
                this.getHousePhotoData();
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取新房详情数据
            this.getEstateHouseDetails();

            window.addEventListener('scroll', this.isScrollTop, false);

        },
        destroyed: function() {
            window.removeEventListener('scroll', this.isScrollTop, false);//离开的时候注销事件
        },
        methods: {
            //获取新房详情数据
            getEstateHouseDetails() {
                this.$get('/house/detail/'+ this.EstateHouseId).then(res => {
                    let data = [];
                    if (res.status == 0) {
                        this.EstateHouseDetails = res.data;
                        //设置新房详情页使用——新房详情数据
                        this.$store.commit('set_EstateHouseDetails', res.data);

                        //设置新房详情页使用——同价位房源列表id
                        this.$store.commit('set_PriceSectionId', res.data.priceSectionId);

                        //公共组件房贷计算器使用——房源价格
                        this.$store.commit('set_housePrice', res.data.price ? parseInt(res.data.price * 10000) : 0);

                        this.downPayment = res.data.downPayment;    //贷款计算器——首付百分比
                        this.propertyTaxRate = res.data.propertyTax;    //贷款计算器——房产税年利率
                        this.PropertyManagementFee = res.data.propertyFee;  //贷款计算器——物业费

                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //判断页面滚动条是否超过了楼层导航第二个链接
            isScrollTop(){
                if(document.documentElement.scrollTop > 1657){
                    this.cityAnchorLink = false;
                }else{
                    this.cityAnchorLink = true;
                }
            }

        },
        components: {
            recommendHouse,//公共组件——房源推荐
            consultantTeam,//公共组件——中美置业团队

            DetailsHeader,  //头部：标题、收藏、加入对比、帮我找房功能，左侧房源轮播图和视频，右侧房源基本信息
            ProjectDetails, //项目详情
            CityOverview,//城市概况
            Question,//百科常见问题——房产问题3条
            RightList,//右侧列表：购房意向、同价位房源、热门房源

            HouseLoanCalculator,//公共组件——贷款计算器
            ClientPurchaseHouseAbility,//公共组件——客户购房能力
            RentRatioCalculator,//公共组件——租售比计算器
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f5f5f5;
        .EstateDetails-box {
            .content {
                margin-bottom: 20px;
                > .container {
                    > .buy-house-process {
                        width: 100%;
                        text-align: center;
                    }
                    >.ant-row {
                        margin: 40px 0 0 0;
                        > .left-box {
                            padding: 0;
                            /*自定义楼层导航样式*/
                            .anchor-box {
                                >.ant-affix {
                                    width: 100% !important;
                                    top: 60px !important;
                                    left: 0px !important;
                                }
                                .ant-anchor-wrapper{
                                    font-size: 16px;
                                    padding: 0 100px;
                                    background: #414772;
                                    >.ant-anchor{
                                        width: 100%;
                                        display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/
                                        display: flex;
                                        text-align: center;
                                        height: 56px;
                                        line-height: 56px;
                                        font-size: 16px;
                                        padding: 0;
                                        >.ant-anchor-ink:first-of-type{
                                            display: none;
                                        }
                                        >.ant-anchor-link{
                                            flex: 1;
                                            float: left;
                                            width: 12.5%;
                                            padding:0px;
                                            line-height: 56px;
                                            >a{
                                                display: block;
                                                width: 100%;
                                                color: #fff;
                                            }
                                            >a:hover{
                                                color: #fff;
                                            }
                                        }
                                        >.ant-anchor-link-active{
                                            background: #0c7cd5;
                                            >a{
                                                color: #fff;
                                            }
                                        }
                                    }
                                }
                            }

                            > .inside {
                                background: #fff;
                                position: relative;
                                /*每个大盒子的公共头部和内容样式*/
                                .public-header-content {
                                    position: relative;
                                    margin: 60px 0;
                                    >header{
                                        width: 60px;
                                        line-height: 25px;
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        background: #42a9ee;
                                        font-size: 20px;
                                        color: #fff;
                                        padding: 6px;
                                        text-align: center;
                                    }
                                    > .content {
                                        width: 100%;
                                        padding: 0 40px 0 80px;
                                    }
                                }

                                .content {
                                    img {
                                        width: 100%;
                                        max-width: 100% !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
